<template>
<section>
    <Search :searchList="searchList" @search="search" ref="search">

    </Search>
    <ButtonBar :keyName="key" @callAction="callAction">

    </ButtonBar>

    <div class="table">
        <el-table ref="singleTable" @select="select" :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;" max-height="490" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column type="index" label="列号" width="65">
            </el-table-column>
            <el-table-column prop="UserName" label="姓名">
            </el-table-column>
            <el-table-column prop="AccountNumber" label="账号">
            </el-table-column>
            <el-table-column prop="Sex" label="性别" :formatter="formatSex"></el-table-column>
            <el-table-column prop="State" label="状态" ilter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.State ===0 ? 'success' : 'danger'" disable-transitions>{{(scope.row.State===0?'启用':'禁用')}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="CreateTime" label="创建时间" :formatter="formatCreateTime">
            </el-table-column>
        </el-table>

    </div>
    <!--列表-->

   <el-col :span="24" class="paging">

        <el-pagination background layout="total,prev, pager, next" :page-size='pageSize' :total="total" :current-page="page" @current-change="currentChange" style="text-align:center;">
        </el-pagination>
    </el-col>
    <!--新增与修改界面-->
    <el-dialog :title="dialogTitle" :visible.sync="userFormVisible" v-model="userFormVisible" :close-on-click-modal="false">
        <el-form :model="userForm" label-width="80px" :rules="userFormRules" ref="userForm">
            <!-- <el-input v-model="userForm.Id" type="hidden"></el-input> -->
            <el-form-item label="昵称" prop="UserName">
                <el-input v-model="userForm.UserName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="登录名" prop="AccountNumber">
                <el-input v-model="userForm.AccountNumber" auto-complete="off"></el-input>
            </el-form-item>
            <template v-if="userForm.IsAdd">
                <el-form-item label="密码" userForm="Password" prop="Password">
                    <el-input v-model="userForm.Password" auto-complete="off" type="password"></el-input>
                </el-form-item>
            </template>

            <el-form-item label="性别">
                <el-radio-group v-model="userForm.Sex">
                    <el-radio class="radio" :label="0">男</el-radio>
                    <el-radio class="radio" :label="1">女</el-radio>
                    <el-radio class="radio" :label="2">未知</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input-number v-model="userForm.Age" :min="0" :max="200"></el-input-number>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="userForm.State">
                    <el-radio class="radio" :label="0">启用</el-radio>
                    <el-radio class="radio" :label="1">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="userForm.RoleIds" multiple placeholder="请选择角色">
                    <el-option v-for="item in roleList" :key="item.Value" :label="item.Text" :value="item.Value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="userFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="submitForm" :loading="loading">提交</el-button>
        </div>
    </el-dialog>
</section>
</template>

<script>
import util from '../../common/js/util'
import Search from '@/views/Search.vue'
import ButtonBar from '@/components/ButtonBar'
import Paging from '@/components/Paging'
//import NProgress from 'nprogress'
import {
    getUserListPage,
    loadUserInfo,
    deleteUser,
    addOrUpdateUserInfoAsync,
    roleSelectList
} from '../../api/api';
export default {

    data() {
        return {
            key: "用户列表",
            searchList: [{

                value: "",
                name: "UserName",
                title: "姓名",
                valueType: "",
            }, {

                value: "",
                name: "AccountNumber",
                title: "账号",
                valueType: "",
             
            }],
            users: [],
            roleList: [],
            total: 0,
            page: 1,
            pageSize: 10,
            listLoading: false,
            isChangePage: false,
            userFormVisible: false, //界面是否显示
            dialogTitle: "新增",
            loading: false,
            userForm: { //表单数据
                UserName: "",
                AccountNumber: "",
                Sex: 0,
                State: 0,
                Id: "",
                Age: 0,
                IsAdd: true,
                RoleIds: [],
            },
            userFormRules: {

                UserName: [{
                        required: true,
                        message: '请输入用户名称',
                        trigger: 'blur'
                    },
                    {
                        min: 1,
                        max: 10,
                        message: '长度在 1 到 10个字符',
                        trigger: 'blur'
                    }

                ],
                AccountNumber: [{
                    required: true,
                    message: '请输入登录名称',
                    trigger: 'blur'
                }],
                Password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }]
            },
            selection: []
            //filters = [],

        }
    },
    components: {
        Search,
        ButtonBar,
        Paging
    },
    methods: {

        callAction: function (params) {
            // var _this = this[params];
            // if (_this == undefined) {

            // }
            // _this.apply(this);
            util.callAction(this, params);
        },
        search: function (data) {

            this.getUsers(data);
        },
        //性别显示转换
        formatSex: function (row, column) {
            return row.Sex == 0 ? '男' : row.Sex == 1 ? '女' : '未知';
        },
        formatCreateTime: function (row, column) {
            var crtTime = new Date(row.CreateTime);
            return this.dateFtt("yyyy-MM-dd hh:mm:ss", crtTime); //直接调用公共JS里面的时间类处理的办法     
        },

        dateFtt(fmt, date) { //author: meizz   
            var o = {
                "M+": date.getMonth() + 1, //月份   
                "d+": date.getDate(), //日   
                "h+": date.getHours(), //小时   
                "m+": date.getMinutes(), //分   
                "s+": date.getSeconds(), //秒   
                "q+": Math.floor((date.getMonth() + 3) / 3), //季度   
                "S": date.getMilliseconds() //毫秒   
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        },

        currentChange: function (row) {
            this.page = row;
            this.getUsers();
        },

        //获取用户列表
        getUsers(filters) {
            let newFilters = filters || [];
            let para = {
                pageIndex: newFilters.length > 0 ? 1 : this.page,
                pageSize: this.pageSize,
                filters: newFilters,
            };

            this.listLoading = true;
            //NProgress.start();
            getUserListPage(para).then((res) => {
                if (!util.isEmt.format(res)) {
                    if (res.success) {
                        this.total = res.total;
                        this.users = res.data;
                    }

                }

                this.listLoading = false;
                //NProgress.done();
            });
        },
        //删除

        //编辑
        handleUpdate: function () {
            let _this = this;

            util.getSingleSelectionTableData(this.selection, function (id, row) {
                _this.dialogTitle = "修改";
                let para = {};

                roleSelectList(para).then(res => {
                    // this.userForm = Object.assign({}, row);
                    let {
                        message,
                        success,
                        type,
                        data
                    } = res;
                    if (res.success) {
                        // _this.userFormVisible = true;
                        let roleList = res.data;
                        loadUserInfo({
                            id: id
                        }).then(ress => {

                            //this.userForm = Object.assign({}, row);
                            let {
                                message,
                                success,
                                type,
                                data
                            } = ress;

                            if (ress.success) {

                                _this.userForm = data;
                                _this.userFormVisible = true;
                                _this.userForm.IsAdd = false;
                                _this.roleList = roleList;

                            }

                        });

                    }

                });
            });

        },
        //新增
        handleAdd: function () {
            this.dialogTitle = "新增";
            let para = {};

            roleSelectList(para).then(res => {

                this.userFormVisible = true;
                // this.userForm = Object.assign({}, row);
                let {
                    message,
                    success,
                    type,
                    data
                } = res;
                if (res.success) {

                    this.userForm = Object.assign({}, { //表单数据
                        UserName: "",
                        AccountNumber: "",
                        Password: "",
                        Sex: 0,
                        State: 0,
                        Age: 0,
                        IsAdd: true,
                        RoleIds: [],
                    });
                    this.roleList = res.data;
                }

            });

        },

        submitForm: function () {
            this.$refs.userForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        this.loading = true;
                        //NProgress.start();

                        let para = Object.assign({}, this.userForm);

                        addOrUpdateUserInfoAsync(para).then((res) => {

                            if (util.isEmt.format(res)) {
                                this.loading = false;
                                return;
                            }
                            if (res.success) {
                                this.loading = false;
                                //NProgress.done();
                                this.$message({
                                    message: res.message,
                                    type: 'success'
                                });
                                this.$refs['userForm'].resetFields();
                                this.userFormVisible = false;
                                this.getUsers();
                            } else {
                                this.loading = false;
                                this.$message({
                                    message: res.message,

                                    type: 'error'
                                });

                            }

                        });

                    });
                }
            });
        },
        select: function (selection, row) {

            this.selection = selection;
        },

        //删除
        handleDelete: function () {
            var _this = this;
            util.getSingleSelectionTableData(_this.selection, function (id, row) {
                var para = {
                    id: id
                };
                _this.listLoading = true;

                deleteUser(para).then((res) => {
                    if (res.success) {

                        _this.$message({
                            message: res.message,
                            type: 'success'
                        });
                        _this.$refs.search.reset();
                        _this.getUsers();

                    } else {

                        _this.$message({
                            message: res.message,

                            type: 'error'
                        });
                    }

                });
                _this.listLoading = false;

            });

        },

        // reset: function () {

        //     debugger;
        // },
    },
    // watch: {

    // },

    mounted() {
        this.getUsers();

    }
}
</script>

<style scoped>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
</style>
